<template>
  <LayoutArea>
    <template #top>
      <NavigationNavBar :fixed="false">
        <NavigationSideLogo/>
      </NavigationNavBar>
    </template>

    <template #side>
      <LayoutSection :title="localeInject.t('project.manageTitle')">
        <div class="side-container">
          <el-button type="primary" class="create-action" @click="goToOverView()">
            <div>一键抠图</div>
          </el-button>
        </div>
      </LayoutSection>
    </template>
    <template #side2>
      <div class="side-container">
        <el-button type="primary" class="create-action" @click="cutManager()">
          {{ _t('project.cutManager') }}
        </el-button>
      </div>
    </template>
    <!--    <template #side3>-->
    <!--        <div class="side-container">-->
    <!--          <el-button type="primary" class="create-action" @click="goToOverView()">-->
    <!--            <div>临时用</div>-->
    <!--          </el-button>-->
    <!--        </div>-->
    <!--    </template>-->
    <!--    <template #content>-->
    <!--      <LayoutSection has-divider flex-content>-->
    <!--        <template #head>-->
    <!--          <SearchCorporation @select="handleSelectSearch"/>-->
    <!--          <el-date-picker :start-placeholder="_t('base.startTime')" :end-placeholder="_t('base.endTime')"-->
    <!--                          type="datetimerange"/>-->
    <!--        </template>-->

    <!--        <ProjectTableHeader/>-->
    <!--        <ProjectTableBody/>-->
    <!--      </LayoutSection>-->
    <!--    </template>-->
  </LayoutArea>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  getCurrentInstance,
  onBeforeMount,
  onMounted,
  reactive
} from 'vue'
import {useLocale} from 'element-plus'

import NavigationSideLogo from '@/components/Navigation/Side/SideLogo.vue'
import NavigationNavBar from '@/components/Navigation/NavBar.vue'

import ProjectForm from '@/modules/Project/components/ProjectForm.vue'
import ProjectTableHeader from '@/modules/Project/components/TableHeader.vue'
import ProjectTableBody from '@/modules/Project/components/TableBody.vue'

import SearchCorporation from '@/components/SearchSelect/SearchCorporation.vue'
import {sleep} from '@/utils/request'
import useCurrentInstance from '@/hooks/useCurrentInstance'

import {useProjectStore} from '@/modules/Project/store'

export default defineComponent({
  name: 'ProjectList',
  components: {
    NavigationNavBar,
    NavigationSideLogo,
    ProjectTableHeader,
    ProjectTableBody,
    SearchCorporation
  },
  // https://github.com/vuejs/vue-next/issues/3649
  setup() {
    const {proxy} = useCurrentInstance()
    const projectStore = useProjectStore()
    const localeInject = useLocale()

    function handleCreateProject() {
      const formData = reactive({
        name: '',
        corpName: '',
        notes: ''
      })
      proxy.$ModalDialog({
        title: localeInject.t('project.create'),
        top: '10vh',
        width: '50vw',
        'show-close': true,
        'close-on-click-modal': false,
        'close-on-press-escape': false,
        renderComponent: {
          data: formData,
          component: ProjectForm
        },
        async onConfirm(instance, context) {
          const isValid = await instance.validateRules()
          if (!isValid) return Promise.reject(new Error('error'))
          context.fullLoading = true
          const {error, data} = await projectStore.createProject(formData)
          context.fullLoading = false
          if (error) {
            return Promise.reject(new Error('error'))
          }
          projectStore.getProjectList()
        }
      })
    }

    function handleSelectSearch(name?: string) {
      console.log('搜索项目名: ', name)
      projectStore.getProjectList({
        kw: name
      })
    }

    handleSelectSearch()

    function cutManager() {
      console.log('hello world')
      proxy.$router.push({name: 'ResultOverview3', params: {projectId: 111}})
    }

    function goToOverView() {
      console.log("跳转图片界面")
      proxy.$router.push({name: 'ResultOverview2', params: {projectId: 111}})
    }

    return {
      localeInject,
      handleCreateProject,
      handleSelectSearch,
      goToOverView,
      cutManager
    }
  }
})

</script>

<style lang="scss" scoped>
.create-action {
  margin-bottom: 30px;
  height: 50px;
  width: 100px;
  font-size: 16px;
  line-height: 50px;
}

.side-container {
  display: flex;
  flex-direction: column;
}
</style>
